<template>
  <v-layout type="main">
    <p class="page-title">数据标注</p>
    <div class="working-area">
      <el-tabs
        v-model="activeTabs"
        type="card"
        @tab-click="handleClick"
        class="my-defined-tabs"
      >
        <el-tab-pane label="工作台" name="1" />
        <el-tab-pane label="标签管理" name="2" />
      </el-tabs>

      <classWorking v-if="ann_type == '图像分类' && activeTabs == 1"  />
      <txtWorking v-if="ann_type == '文本分类' && activeTabs == 1"  />
      <working v-if="ann_type == '目标检测' && activeTabs == 1 " />
      <my-labels ref="myLabels"  v-if="activeTabs == 2"/>
    </div>

  </v-layout>
</template>
<script>

import myLabels from './module/labels.vue'
import working from './module/working.vue'
import classWorking from './module/classWorking.vue'
import txtWorking from './module/txtWorking.vue'
export default {
  data() {

    return {
        activeTabs: "1",
        ann_type: this.$route.query.ann_type,
    };
  },
  components: { myLabels, classWorking ,working,txtWorking},
  methods: {
    handleClick() {
      if (this.activeTabs == '2') {
        this.$refs.myLabels.getLabelsLis()
        document.removeEventListener("keydown", this.switchover)
      }
      // if (this.activeTabs == '1') {
      //   setTimeout(() => {
      //     this.getAllLabel()
      //     this.paletteSwatches()
      //     document.addEventListener("keydown", this.switchover)
      //   }, 500)
      // }
    }
  },
  async mounted() {
    this.$EventBus.$on('addLabel', () => {
      this.activeTabs = '2'
      this.$refs.myLabels.getLabelsLis()
      this.$refs.myLabels.add()
    })
  },

};
</script>

<style lang="less" scoped>
.layout {
  padding: 0 16px;
  .working-area {
    background: #000;
    margin-top: 16px;
    padding: 16px 32px;
    box-shadow: 0px 2px 16px 0px rgba(30, 36, 128, 0.07);
    border-radius: 2px;
  }
}
.tool-bar {
  width: 100%;
  margin-top: 16px;
  overflow: hidden;
  .save-btn{
    float: right;
    margin-right: 16px;
  }
}

</style>
